<template>
    <div class="category">
      <div class="category-item" v-for="i in pCategorys" @mouseenter="enterCategoryItem(i.id)">
        {{i.name}}
      </div>

      <div class="detail" v-if="isShow"  @mouseleave="leaveDetail">
        <div class="detail-classify" v-for="i in goodsCategory">
          <span class="detail-classify-item" @click="goodsCategoryClick(i.id)">{{i.name}}</span>
        </div>
      </div>

    </div>
</template>

<script>
  import {getGoodsCategory} from 'network/mix'
  export default {
    name: "IndexCategory",
    props: {
      pCategorys: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        isShow: false,

        goodsCategory: [], // 商品类目
        rootCategoryId: 0, // 主类目id,通过此来决定是否发出网络请求
      }
    },
    beforeCreate() {
    },
    methods: {
      enterCategoryItem(index) { // 通过i来决定是否发送请求获取数据
        this.isShow = true
        // 发送这个categoryItem的网络请求
        if (this.goodsCategory.length === 0 || this.rootCategoryId !== index) { // 如果当前数组为空或者传入的index不等于上次接收的rootCategoryId,则发送网络请求
          this.mGetGoodsCategory(index)
        }
      },
      leaveDetail() {
        this.isShow = false
      },

      mGetGoodsCategory(rootCategoryId) { // 获取商品类目网络请求
        getGoodsCategory(0, '', '', rootCategoryId, 1)
          .then(res => {
            // console.log(res);
            this.goodsCategory = res.page.list // 将数组放入
            this.rootCategoryId = res.root_category_id // 将本次查询的root主类目id存储
          })
      },
      goodsCategoryClick(goodsCategoryId) {
        this.$emit('goodsCategoryIdEmit', goodsCategoryId)
      },
    }
  }
</script>

<style scoped>
  .category {
    position: relative;
    left: 25px;
    margin-top: 10px;
    box-shadow: 0 0 6px #cdcdcd, 0 0 6px #cdcdcd;

    z-index: 3;
  }
  .category-item {
    position: relative;
    text-align: center;
    line-height: 50px;
    width: 200px;
    height: 50px;
    background-color: white;

    /*border: 1px solid red;*/
    /*background-color: green;*/
  }
  .category-item:hover {
    background-color: #cdcdcd;
  }

  .detail {
    position: absolute;
    left: 100%;
    transform: translateY(-100%);
    box-shadow: 0 0 6px #cdcdcd, 0 0 6px #cdcdcd;

    height: 100%;
    width: 600%;

    z-index: 3;
    background-color: white;

    /*background-color: yellow;*/
    /*border: 1px solid red;*/
  }
  .detail-classify {
    /*超出换行*/
    word-wrap:break-word;
    word-break:break-all;

    float: left;
    /*超出换行*/
    margin: 16px;
    /*background-color: #fff;*/

    /*background-color: red;*/
  }

  .detail-classify-item {
    margin: 30px;
    font-size: 20px;

    /*background-color: green;*/
  }
  .detail-classify-item:hover {
    cursor: pointer; /*放上变手指*/
    color: red;
  }
</style>